<template>
   <div id="account-info-page" class="account-info-box">
    <mobileNavbar :name="$t('message.userInfo.accountSet')" @back="back"></mobileNavbar>
    <div class="account-info" v-for="(item,index) in list" :key="index">
      <div v-for="(itemL,indexL) in item.list" :key="indexL" class="account-info-item" :class="[indexL==0&&'bottom-border']" @click="handleClick(itemL)">
        <div class="item-name">{{$t(itemL.name)}}</div>
        <div class="content-box">
          <img class="header" v-if="itemL.key=='image'" :src="userInfo.headImg">
          <div v-else class="content" :class="[itemL.type=='prop'&&'major-info']">
            {{itemL.type=='prop'?userInfo.realName:$t(itemL.label)}}
          </div>
        </div>
        <div class="right-arrow">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#keowledge-mobile-a-zu4905"></use>
          </svg>
        </div>
      </div>
      <div class="fill-dirver-line"></div>
    </div>
    <div class="logout-button" @click="logout">{{$t('message.userInfo.exitLogin')}}</div>
    <div class="fill-dirver-line"></div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import mobileNavbar from './mobileNavbar.vue';
import { loginoutHandle } from "@/api/login"
import { setSessionStore, getSessionStore,getStore,removeItemAll } from '@/utils/store.js'
import useUserInfoStore from '@/store/userInfo'
const userStore = useUserInfoStore()
import { useRouter,useRoute } from "vue-router"
const router = useRouter();
const route = useRoute();

const emit = defineEmits([""])
const props = defineProps({

})
const list = ref([
  {
    type:'info',
    list:[
      {name:'message.userInfo.avatar',type:'prop',label:'message.text.setAccount',key:'image'},
      {name:'message.userInfo.nickName',type:'prop',label:'message.text.xxx',key:'text','path':'/mobile/editusername'}
    ]
  },
  {
    type:'account',
    list:[
      {name:'message.account',type:'text',label:'message.text.setAccount',key:'text',path:'/mobile/editaccount'},
      {name:'message.password',type:'text',label:'message.userInfo.setPassword',key:'text',path:'/mobile/editpassword'}
    ]
  }
])
const routerList = ref([])
const userInfo = ref({})

onMounted(()=>{
  routerList.value = getSessionStore({name:'mobileRouterList'}) || []
  userInfo.value = getStore({name:'userInfo'}) || {tenant:{}}
})

function logout(){
  proxy.$mobileConfirm({
    text:$t('message.confirm.exitContinue'),
    cancal(callBack){
      callBack && callBack()
    },
    submit(){
      loginoutHandle().then(async res => {
        if(res.data.code == 0) {
          removeItemAll(['lib','allType','iconList','isMobile'])
          await userStore.LogOut()
          if(route.path != '/mobile/login') {
            router.push({path: '/mobile/login'})
          }else{
            location.reload()
          }
        }
      }).catch(err=>{
        if(err instanceof  Error)  {
          if(err.message.indexOf('Authorization')){
            router.push({path: '/mobile/login'})
          }
        }
        
        // _self.$router.push({path: '/mobile/login'})
      })
    }
  })
}
function handleClick(val){
  if(val.path){
    let currentPath = route.fullPath
    if(routerList.value.indexOf(currentPath)!=-1){
      routerList.value.splice(routerList.value.indexOf(currentPath),1)
    }
    routerList.value.push(currentPath)
    setSessionStore({name:'mobileRouterList',content:routerList.value})
    router.push(val.path)
  }
}
function back(val){
  router.push(val)
}
</script>
<style lang="scss" scoped>
.account-info-box{
  .account-info{
    .account-info-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 4.625rem;
      padding: 0px .9375rem;
      .item-name{
        @include SourceHanSansCN-Regular;
        font-size: .875rem;
        color: #363B4c;
      }
      .content-box{
        margin-right: .75rem;
        margin-left: .875rem;
        width: calc(100% - 4.625rem);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .header{
          width: 2.75rem;
          height: 2.75rem;
          border-radius: .3125rem
        }
        .content{
          @include SourceHanSansCN-Regular;
          font-size: .875rem;
          color: #6F7588;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .major-info{
          color: #363B4c;
        }
      }
      .right-arrow{
        width: 1rem;
        height: 1rem;
        .icon{
          width: 1rem;
          height: 1rem;
        }
      }
    }
    .bottom-border{
      padding: 0px !important;
      border-bottom: 1px solid #eeeff0;
      margin: 0px .9375rem;
    }
  }
  .fill-dirver-line{
    height: .625rem;
    background: #F5F6F7;
  }
  .logout-button{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.3125rem;
    color: #FF194C;
    font-size: 1rem;
    letter-spacing: .0625rem;
    @include SourceHanSansCN-Regular;
  }
  .button-disable{
    background: #8EB7FF;
  }
}
</style>